<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-header a {
            color: #666;
            text-decoration: none;
        }

        .el-header .el-menu-item a {
            font-size: 15px;
            text-decoration: none;
            color: white;
        }

        body {
            font: 14px/1.571429 "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", Roboto, Arial, sans-serif;
            color: #76838f;
            margin: 0;
            width: 100%;
            max-width: 100%;
            min-width: 320px;
            min-height: 100vh;
        }

        .el-menu.el-menu--horizontal {
            border: 0; /*去掉导航菜单自带的边框*/
        }

        .el-table .el-table__cell {
            padding: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="60px" style="background-color: #545c64;position:fixed;top:0;left:0;width:100%;z-index:9999">
            <div style="width: 1200px;margin: 0 auto">
                <img src="../img/zhaopai.jpg" style="vertical-align: middle" width="150" height="60">
                <span style="float:right;margin-right: 10px;">
                    <el-menu mode="horizontal" style="background-color: #545c64">
                        <el-menu-item index="1"><a href="首页.html">网站首页</a></el-menu-item>
                        <el-menu-item index="2"><a href="关于我们.html">关于我们</a></el-menu-item>
                        <el-menu-item index="3"><a href="photoPrice.html">拍摄价格</a></el-menu-item>
                        <el-menu-item index="4"><a href="作品展示.html">作品展示</a></el-menu-item>
                        <el-menu-item index="5"><a href="联系我们.html">联系我们</a></el-menu-item>
                    </el-menu>
                </span>
            </div>
        </el-header>

        <!--轮播图-->
        <el-main style="width: 100%;margin: 0 auto">
            <el-row>
                <el-col span="24">
                    <el-carousel height="700px">
                        <el-carousel-item v-for="url in arr">
                            <img :src="url" width="100%" height="100%">
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>

            <!--服务项目-->
            <el-row gutter="20" style="margin: 0 auto">
                <p style="text-align: center;color: #1f1f1f;font-weight: 600;font-size: 36px">服务项目</p>
                <p style="text-align: center;color: #666;;font-size: 16px">All services</p>
                <el-col style="margin: 0 auto" span="6" v-for="p in productArr">
                    <a href="" style="text-decoration: none">
                        <el-card>
                            <img :src="p.url" width="348.75px" height="261.56px"
                                 style="margin: 0 30px;text-align: center">
                            <p style="font-size: 24px;height: 30px;color: #000000;text-align: center">{{p.title}}</p>
                        </el-card>
                    </a>
                </el-col>
            </el-row>

            <!--关于我们-->
            <div style="text-align: center;background-color: #F5F5F5;padding: 15px">
                <p style="font-size: 36px;font-weight: 600;color: #000000">关于我们</p>
                <p style="font-size: 16px;color: #666;margin-top: -30px">About us and company introduction</p>
                <p style="text-align: center;font-size: 16px;color: #2A333c;margin: 0 0 12.8px">
                    大北照相馆始建于1921年，是全国照相业享有盛誉的“中华老字号”企业，既是中国最早的照相馆之一，也是北京现存最早的照相馆。1954年，就承担起在中南海怀仁堂和人民大会堂<br>
                    召开的全国党代会、人代会、政协会、劳模大会等大型团体合影的拍照任务，多次得到中央领导的称赞。同时，各种证件照、儿童套照、家庭合影照、戏装照、婚纱照、黑白经典艺术照<br>
                    深受百姓喜爱。</p>
                <p style="font-size: 16px;color:#2A333c;text-align: center">Da Bei Photo Studio was founded in 1921. It
                    is an old and famous firm which is well-known in photo studio industry of China. As one of the
                    oldest photo studios in China, it is also<br>
                    the oldest photo studio in BeiJing. Since 1954, Da Bei Photo Studio has been undertaking of mission
                    of taking group photos for National Congress of Communist Party of China, the<br>
                    National People’s Congress,Political Consultation Congress,Conference of Model Workers, etc. held in
                    Huai Ren Tang of Zhong Nan Hai or the Great Hall of the People. Da Bei Photo<br>
                    Studio provides complete services such as taking photos for certificate, taking suite photos for
                    children, taking family group photos, taking photos of theatrical costume,taking<br>
                    wedding photos and taking classical black-and-white photos.These products of taking photos are more
                    attractive.</p>
            </div>

            <!--作品展示-->
            <el-row gutter="20" style="margin: 0 auto">
                <p style="text-align: center;color: #2D2D2F;font-weight: 600;font-size: 36px;margin: 0 0 11px 0">
                    作品展示</p>
                <p style="text-align: center;color: #C2C2C2;font-size: 16px">Success stories and customer shows</p>
                <el-col style="margin: 0 auto" span="6" v-for="s in showsArr">
                    <a href="" style="text-decoration: none">
                        <el-card>
                            <img :src="s.url" width="230px" height="322.67px" style="margin: 0 85px;text-align: center">
                            <p style="font-size: 24px;height: 30px;color: #000000;text-align: center">{{s.title}}</p>
                        </el-card>
                    </a>
                </el-col>
            </el-row>
        </el-main>

        <el-footer>
            <div style="background-color: #545c64;text-align: center;
             color: white;padding: 50px 0">
                <p>大北照相馆官方网站，为您提供照相前指导，普及照相知识，提供优质网络服务！</p>
                <p>北京大北照相有限责任公司 京ICP备15047318号-1 </p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                arr: ["https://www.dabeiphoto.com.cn/upload/202205/1653974544.jpg",
                    "https://www.dabeiphoto.com.cn/upload/202007/1595911133.jpg",
                    "https://www.dabeiphoto.com.cn/upload/202102/1613370881.jpg",
                    "https://www.dabeiphoto.com.cn/upload/202102/1613379406.jpg"],
                productArr: [{url: "photoPrice/儿童摄影.jpg", title: "儿童摄影"},
                    {url: "photoPrice/家庭合影.jpg", title: "家庭合影"},
                    {url: "photoPrice/艺术摄影.jpg", title: "艺术摄影"},
                    {url: "photoPrice/戏装摄影.jpg", title: "戏装摄影"},
                    {url: "photoPrice/证件摄影.jpg", title: "证件摄影"},
                    {url: "photoPrice/经典套照.jpg", title: "经典套照"},
                    {url: "photoPrice/婚纱摄影.jpg", title: "婚纱摄影"},
                    {url: "photoPrice/团体合影.jpg", title: "团体合影"}],
                showsArr: [{
                    url: "https://www.dabeiphoto.com.cn/upload/thumb_src/335_470/1653982837.jpg",
                    title: "儿童彩色虚光"
                },
                    {url: "https://www.dabeiphoto.com.cn/upload/thumb_src/335_470/1547628366.jpg", title: "儿童黑白虚光"},
                    {url: "https://www.dabeiphoto.com.cn/upload/thumb_src/335_470/1547628646.jpg", title: "儿童摄影"},
                    {url: "https://www.dabeiphoto.com.cn/upload/thumb_src/335_470/1547628328.jpg", title: "儿童古风艺术照"},
                    {url: "https://www.dabeiphoto.com.cn/upload/thumb_src/335_470/1648009088.jpg", title: "彩色肖像"},
                    {url: "https://www.dabeiphoto.com.cn/upload/thumb_src/335_470/1547627877.jpg", title: "复古合影"},
                    {url: "https://www.dabeiphoto.com.cn/upload/thumb_src/335_470/1547628155.jpg", title: "婚纱摄影"},
                    {url: "https://www.dabeiphoto.com.cn/upload/thumb_src/335_470/1547628652.jpg", title: "复古肖像"}]
            }
        },
        methods: {}
    })
</script>
</html>